<!--
 * @description: 封装vant下拉选择
 * @Author: wxy
 * @Date: 2019-04-12 10:15:39
 -->
<template>
  <div class="van-select-wrap">
    <van-cell v-if="disabled" :title="title">{{ value instanceof Array ? value.join(',') : value }}</van-cell>
    <van-cell v-else is-link @click="show = true" :class="{ 'is-error': error }">
      <template slot="title">
        <span v-if="required" class="required-sign">*</span>
        {{ title }}
        <slot name="title-icon"></slot>
      </template>
      {{ showValue }}
    </van-cell>
    <validate-error v-if="required" :error="error" :message="errorMsg"></validate-error>
    <van-popup v-model="show" position="bottom" @closed="cancel">
      <van-search v-if="filterable" placeholder="请输入搜索关键词" v-model="searchKeywords" @input="search(columns)" />
      <van-picker
        v-if="!multiple"
        show-toolbar
        @cancel="cancel"
        @confirm="onConfirm"
        :value-key="valueKey"
        :columns="filterColumns"
      />
      <div v-else class="checkbox-container">
        <div class="van-hairline--top-bottom van-picker__toolbar">
          <button class="van-picker__cancel" @click="cancel">取消</button>
          <button class="van-picker__confirm" @click="onConfirm">确认</button>
        </div>
        <div class="group-wrap">
          <van-checkbox-group v-model="valueCopy">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in filterColumns"
                clickable
                :key="index"
                :title="item[valueKey] || item"
                @click="toggle(index)"
              >
                <van-checkbox v-if="valueKey" :name="JSON.stringify(item)" ref="checkboxes" slot="right-icon" />
                <van-checkbox v-else :name="item" ref="checkboxes" slot="right-icon" />
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'VanSelect',
  props: {
    title: {
      required: true,
      type: String,
    },
    value: {
      required: true,
    },
    columns: {
      required: true,
      type: Array,
    },
    required: {
      type: Boolean,
    },
    error: {
      type: Boolean,
    },
    errorMsg: {
      type: String,
    },
    valueKey: {
      type: String,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
  },
  components: {
  },
  data() {
    return {
      show: false,
      selectedValue: this.value,
      valueCopy: undefined,
      searchKeywords: '',
      filterColumns: [],
    }
  },
  watch: {
    value: {
      handler: function(val, oldVal) {
        this.valueCopy = val
        console.log(val, this.valueCopy)
      },
      immediate: true,
      deep: true,
    },
    columns: {
      handler: 'search',
      immediate: true,
      deep: true,
    },
  },
  created() {},
  computed: {
    showValue() {
      if (this.multiple) {
        if (this.valueKey) {
          return this.value
            .map(item => {
              return JSON.parse(item)[this.valueKey]
            })
            .join(',')
        } else {
          return this.value.join(',')
        }
      } else {
        // if(this.valueKey){
        //   return this.value[this.valueKey] || this.value
        // }
        return this.value
      }
    },
  },
  methods: {
    onConfirm(value) {
      if (this.multiple) {
        this.$emit('change', this.valueCopy)
      } else {
        this.$emit('change', value)
      }
      this.show = false
    },
    cancel() {
      if (this.multiple) {
        this.valueCopy = this.value
      }
      this.searchKeywords = ''
      this.search(this.columns)
      this.show = false
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    search(baseColumn) {
      let _this = this
      if (baseColumn && baseColumn.length) {
        this.filterColumns = baseColumn.filter(item => {
          let value = String(_this.valueKey ? item[_this.valueKey] : item)
          return value.indexOf(this.searchKeywords) !== -1
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.van-cell-group {
  margin-bottom: 10px;
  .van-cell {
    font-size: 16px;
    color: #666;
    .van-cell__value {
      color: #333;
    }
  }
}
.van-select-wrap {
  // /deep/ .van-cell--clickable {
  //   padding-left: 7px !important;
  //   padding-right: 7px !important;
  // }
  .required-sign {
    color: #f00;
  }
  .checkbox-container {
    position: relative;
    overflow: hidden;
    .van-picker__toolbar {
      width: 100%;
      height: 44px;
    }
    .group-wrap {
      max-height: 250px;
      overflow-y: auto;
    }
  }
}
</style>
